<template>
  <div class="nav-bar">
    <div class="nav-content">
      <div class="nav-content-item">
        <!-- <a :href="item.url" class="nav-content-list" v-for="item in nav" :key="item.img_url" >
					<img :src="item.img_url" alt="">
					<span>{{item.title}}</span>
				</a> -->
        <div
          @click="handlePush(item.url, index)"
          class="nav-content-list"
          v-for="(item, index) in nav"
          :key="index"
        >
          <img :src="item.img_url" alt="" />
          <span>{{ item.title }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "mint-ui";
export default {
  data() {
    return {
      nav: [],
    };
  },
  created() {
    this.getnav();
  },
  methods: {
    getnav() {
      this.$http.get("src/data/nav.json").then((result) => {
        if (result.body.status === 0) {
          this.nav = result.body.message;
        }
      });
    },
    handlePush(url, index) {
      // console.log(url, index);
      // 只实现百亿补贴
      this.$router.push("/xianshimiaosha");
    },
  },
};
</script>

<style lang="scss" scoped>
.nav-bar {
  width: 100%;
  height: 11.25rem;
  position: relative;
  background-color: #fff;
  padding-bottom: 0.625rem;
  .nav-content {
    width: 100%;
    overflow-x: scroll;
    .nav-content-item {
      width: 650px;
      height: 11.25rem;
      display: flex;
      flex-wrap: wrap;
      .nav-content-list {
        width: 5.625rem;
        height: 5.625rem;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        img {
          width: 50%;
          margin-bottom: 0.625rem;
        }
        span {
          font-size: 0.8125rem;
        }
      }
    }
  }
//   隐藏滚动条
  .nav-content::-webkit-scrollbar {
    display: none;
  }
}
</style>
